<template>
    <div class="rating-wraper" ref="ratingWraper">
        <div class="rating-content">
            <div class="evaluate-container">
                <div class="evaluate-left">
                    <span class="seller-count">{{seller.score}}</span>
                    <span class="count-title">综合评分</span>
                    <span class="nearby-rating">高于周边商家{{seller.rankRate}}%</span>
                </div>
                <div class="evaluate-right border-1px-left">
                    <div class="service"><span class="count-title">服务态度</span><v-star :size="36" :score="seller.serviceScore" class="star"></v-star><span class="count-num">{{seller.serviceScore}}</span></div>
                    <div class="food"><span class="count-title">美味程度</span><v-star :size="36" :score="seller.foodScore" class="star"></v-star><span class="count-num">{{seller.foodScore}}</span></div>
                    <div class="deliver"><span class="count-title">送达时间</span><span class="time">{{seller.deliveryTime}}分钟</span></div>
                </div>
            </div>
            <v-split class="split"></v-split>
            <v-food_ratings :selectType="selectType" @changeType="changeSelectType" :ratings="ratings" :selectMsg="selectMsg" :readContent="readContent" @changeReadContent="changeContent"></v-food_ratings>
            <ul class="comments-list">
                <li class="comments-list-item border-1px-bottom" v-for="rating in filterArray">
                    <img :src="rating.avatar" alt="" class="avatar"/>
                    <div class="comment-container">
                        <span class="user-name">{{rating.username}}</span>
                        <p class="comment-detail"><v-star :size="24" :score="rating.score" class="star"></v-star><span class="deliver-time" v-show="rating.deliveryTime&&rating.deliveryTime!=''">{{rating.deliveryTime}}分钟送达</span></p>
                        <p class="comment-content">{{rating.text}}</p>
                        <div class="comment-recommend" v-if="rating.recommend&&rating.recommend.length>0"><i class="icon-thumb_up"></i><div class="recommend-food-container"><span class="recommend-food" v-for="re in rating.recommend">{{re}}</span></div></div>
                    </div>
                    <span class="time">{{rating.rateTime | formatDate}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script type="es6">
    import star from '../star/star'
    import split from '../split/split'
    import {formateDate} from '../../../public/js/date'
    import BScroll from 'better-scroll'
    import food_ratings from '../food_ratings/food_ratings'
    export default{
        name:'rating',
        data(){
            return {
                ratings:[],
                selectType:0,
                selectMsg:{
                    all:"全部",
                    positive:"满意",
                    nagative:"不满意"
                },
                readContent:true
            }
        },
        props:{
            seller:{
                type:Object
            }
        },
        created () {
            this.$http.get("api/ratings").then((response)=>{
                response = response.body
                this.ratings = response.ratings
                this.$nextTick(() => {
                    this.scroll = new BScroll(this.$refs.ratingWraper,{
                        click:true
                    })
                })
            })
        },
        methods:{
            changeSelectType (type) {
                this.selectType = type
                this.$nextTick(()=>{
                    this.scroll.refresh()
                })
            },
            changeContent (content) {
                this.readContent = content
                this.$nextTick(()=>{
                    this.scroll.refresh()
                })
            }
        },
        computed:{
            filterArray () {
                let contentArr = []
                if(this.ratings){
                    this.ratings.forEach((rating)=>{
                        switch (this.selectType) {
                            case 0 :
                                if(this.readContent&&rating.text&&rating.text!=""){
                                    contentArr.push(rating)
                                }else if(!this.readContent){
                                    contentArr.push(rating)
                                }
                                break
                            case 1 :
                                if(this.readContent&&rating.text&&rating.text!=""&&rating.rateType==0){
                                    contentArr.push(rating)
                                }else if(!this.readContent&&rating.rateType==0){
                                    contentArr.push(rating)
                                }
                                break
                            case 2 :
                                if(this.readContent&&rating.text&&rating.text!=""&&rating.rateType==1){
                                    contentArr.push(rating)
                                }else if(!this.readContent&&rating.rateType==1){
                                    contentArr.push(rating)
                                }
                        }
                    })
                }
                return contentArr
            }
        },
        filters:{
            formatDate (data) {
                return formateDate(new Date(data),"yyyy-MM-dd hh:ss")
            }
        },
        components:{
            "v-star":star,
            "v-split":split,
            "v-food_ratings":food_ratings
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../../../public/stylesheet/mixin.less";
    .rating-wraper{
        position:absolute;
        top:174px;
        left:0;
        right:0;
        bottom:0;
        overflow:hidden;
        .evaluate-container{
            display:flex;
            margin:18px 0;
            .evaluate-left{
                display:flex;
                flex-direction:column;
                align-items:center;
                flex:0 0 138px;
                width:138px;
                padding:6px 0;
                .seller-count{
                    margin-bottom:4px;
                    font-size:24px;
                    line-height:28px;
                    color:rgb(255,153,0);
                }
                .count-title{
                    margin-bottom:8px;
                    font-size:12px;
                    line-height:12px;
                    color:rgb(7,17,27);
                }
                .nearby-rating{
                    font-size:10px;
                    line-height:10px;
                    color:rgb(147,153,159);

                }

            }
            .evaluate-right{
                padding:6px 0 6px 20px;
                .border-1px-left(rgba(7,17,27,0.1));
                .deliver{
                    .time{
                        font-size:12px;
                        line-height:18px;
                        color:rgb(147,153,159);
                    }
                }
                .count-title{
                    vertical-align:top;
                    margin-right:10px;
                    font-size:12px;
                    line-height:18px;
                    color:rgb(7,17,27);
                }
                .star{
                    vertical-align:top;
                    margin-right:6px;
                    line-height:18px;
                }
                .count-num{
                    line-height:18px;
                    font-size:12px;
                    color:rgb(255,153,0);
                }
            }
        }
        .split{
            margin-bottom:18px;
        }
        .comments-list{
            padding:0 18px;
            .comments-list-item{
                position:relative;
                display:flex;
                padding:18px 0 10px 0;
                &:not(:last-child){
                    .border-1px-bottom(rgba(7,17,27,0.1));
                }
                .avatar{
                    flex:0 0 28px;
                    width:28px;
                    height:28px;
                    margin-right:12px;
                    border-radius:50%;
                }
                .comment-container{
                    padding-top:1px;
                    .user-name{
                        font-size:10px;
                        margin-bottom:4px;
                    }
                    .comment-detail{
                        margin-bottom:6px;
                        .star{
                            vertical-align:middle;
                            margin-right:6px;
                        }
                        .deliver-time{
                            font-size:10px;
                            color:rgb(147,153,159);
                        }
                    }
                    .comment-content{
                        font-size:12px;
                        line-height:18px;
                        margin-bottom:8px;
                    }
                    .comment-recommend{
                        display:flex;
                        .icon-thumb_up{
                            margin-right:8px;
                            font-size:12px;
                            line-height:16px;
                            color:rgb(0,160,220);
                        }
                        .recommend-food-container{
                            .recommend-food{
                                display:inline-block;
                                vertical-align:middle;
                                padding:1px 6px;
                                margin-bottom:8px;
                                max-width:50px;
                                height:16px;
                                line-height:18px;
                                margin-right:8px;
                                border:1px solid rgba(7,17,27,0.1);
                                border-radius:2px;
                                overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;
                                font-size:10px;
                            }
                        }
                    }
                }
                .time{
                    position:absolute;
                    right:0;
                    font-size:10px;
                    line-height:12px;
                    color:rgb(147,153,159);
                }
            }
        }
    }

</style>